<template>
  <div class="container">
    <div class="header">
      <el-button icon="el-icon-plus" @click="addcai">新增菜品分类</el-button>
      <el-button icon="el-icon-plus" @click="addcai">新增套餐分类</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="分类名称"> </el-table-column>
      <el-table-column prop="type" label="分类类型"> </el-table-column>
      <el-table-column prop="createTime" label="操作时间"> </el-table-column>
      <el-table-column prop="sort" label="排序"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
         
          <el-link type="primary" @click="addcai">修改</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="这是一段内容确定删除吗？">
            <el-link slot="reference" type="danger">删除</el-link>
          </el-popconfirm>
          
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    
<!-- 新增菜品分类 -->
<el-dialog title="新增菜品分类" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="分类名称：" >
      <el-input autocomplete="off"  placeholder="请输入分类名称"></el-input>
    </el-form-item>
    <el-form-item label="排序：" >
      <el-input autocomplete="off"  placeholder="请输入排序"></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="warning" @click="dialogFormVisible = false">确 定</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">保存并继续添加</el-button>
  </div>
</el-dialog>
<!-- 新增套餐分类 -->
<el-dialog title="新增套餐分类" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="分类名称：" >
      <el-input autocomplete="off"  placeholder="请输入分类名称"></el-input>
    </el-form-item>
    <el-form-item label="排序：" >
      <el-input autocomplete="off"  placeholder="请输入排序"></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="warning" @click="dialogFormVisible = false">确 定</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">保存并继续添加</el-button>
  </div>
</el-dialog>
 <!-- 修改 -->
<el-dialog title="修改分类" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="分类名称：" >
      <el-input autocomplete="off"  placeholder="请输入分类名称"></el-input>
    </el-form-item>
    <el-form-item label="排序：" >
      <el-input autocomplete="off"  placeholder="请输入排序"></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="warning" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import { getCategory } from "@/api/dish";
export default {
  data() {
    return {
      input: "",
      tableData: [],
      currentPage4: 4,
      dialogFormVisible:false,
      pageInfo: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const { data:{records,total}} = await getCategory({...this.pageInfo,name:this.input});
      this.tableData = records;
      this.total = total;
    },
    
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    addcai(){
      this.dialogFormVisible = true
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 22px;
  .header {
    display: flex;
    justify-content: flex-start;
    .el-input {
      width: 250px;
    }
  }
}
</style>
